<script type="text/javascript" language="javascript" charset="utf-8">
$(".header-con li a").removeClass("open-menu");
$(".header-con li #statistical_datum").addClass("open-menu");
</script>
<div class="boxed clearfix">
  <div class="common-tit">
    <h2>招生数据</h2>
    <span>数据统计 > 招生数据</span>
    <div id="studio_select" class="cours-gbtn">
      <div class="list-box">
        <div class="downbtn">
          <span>全部分店</span>
          <em></em>
        </div>
        <ul class="dropdown-menu">
           <li _studio_id="0">全部门店</li>
          <% current_company.studios.each do |studio| %>
            <li _studio_id="<%= studio.id%>"><%= studio.name%></li>
          <% end %>
         <!--  <li>我们</li>
          <li>测试测试测试</li>
          <li>asdfasdfsaf	</li> -->
        </ul>
      </div>
    </div>
  </div>

  <div class="global-data">

    <!-- 学员统计总计 -->
    <div class="xdata-box">
      <h3>总计</h3>
      <ul>
        <li>
          <span><%= @total_result.grow_potential_counts.inject{ |result, element| result + element } %></span>
          <em>新增意向学员(人)</em>
        </li>
        <li>
          <span><%= @total_result.grow_counts.inject{ |result, element| result + element } %></span>
          <em>转化学员(人)</em>
        </li> 
      </ul>
      <div id="coStucon"></div>
    </div>

    <!-- 市场专员统计排行 -->
    <div class="pdata-box clearfix">
      <h3>
        <span>市场专员排行榜</span>
        <div class="pda-tit">
          <em class="pda-sel">业绩排行</em>
          <em>回访排行</em>
        </div>
      </h3>
      <div id="markRanking"></div>
    </div>


    <div class="pdata-box clearfix">
      <div id="chaStuPro"></div>
      <div id="stuAgePro"></div>
      <div id="transPro"></div>
      <div id="noTransPro"></div>
      <div id="infoPro"></div>
      <div id="intenPro"></div>
    </div>
  </div>
</div>
<script src="/assets/js/echarts.common.min.js"></script>
<script src="/assets/js/common-list.js"></script>
<script>

$(function(){


   var studio_name = "<%= @studio.present? ? @studio.name : '全部门店' %>";

   $("#studio_select .downbtn span").text(studio_name);

   $("#studio_select .dropdown-menu li").click(function(){

     location.href = "/admin/statistical_datum/recruit?studio_id="+$(this).attr("_studio_id");
   });
});


// 学员总计
var myChart = echarts.init(document.getElementById('coStucon'));
var xAxisData = <%==  @total_result.dates %>;
var data1 = <%== @total_result.grow_potential_counts %>;
var data2 = <%== @total_result.grow_counts %>;
option = {
  legend: {
    data: ['新增意向学员(人)', '转化学员(人)'],
    align: 'left'
  },
  toolbox: {
    // y: 'bottom',
    feature: {
      magicType: {
        type: ['stack', 'tiled']
      },
      dataView: {},
      saveAsImage: {
        pixelRatio: 2
      }
    }
  },
  tooltip: {},
  xAxis: {
    data: xAxisData,
    silent: false,
    splitLine: {
      show: false
    }
  },
  yAxis: {
  },
  toolbox: {
    show : true,
  },
  dataZoom: [{
    startValue: xAxisData[0]
  }, {
    type: 'inside'
  }],
    series: [{
      name: '新增意向学员(人)',
      type: 'bar',
      data: data1,
      animationDelay: function (idx) {
        return idx * 10;
      }
    }, {
      name: '转化学员(人)',
      type: 'bar',
      data: data2,
      animationDelay: function (idx) {
        return idx * 10 + 100;
      }
    }],
      animationEasing: 'elasticOut',
      animationDelayUpdate: function (idx) {
        return idx * 5;
      }
};
myChart.setOption(option);


// 市场专员排行榜
var myChart1 = echarts.init(document.getElementById('markRanking'));
option1 = {
  tooltip: {
    trigger: 'axis',
  },
  legend: {
    data: ['2011年', '2012年']
  },
  grid: {
    left: '10%',
    right: '10%',
    top: '1%',
    containLabel: false
  },
  toolbox: {
    show : true,
  },
  xAxis: {
    type: 'value',
    boundaryGap: [0, 0.01]
  },
  yAxis: {
    type : 'category',
    axisLabel:{
      interval:0,
      rotate:0,
      margin:2,
      textStyle:{
        color:"#222"
      }},
    data: <%==  @market_result.market_names %>
  },
  series: [
  {
    name: '今天',
    type: 'bar',
    data: <%==  @market_result.market_values %>
  }
  ]
};

myChart1.setOption(option1);



//转换学员比
var myChart2 = echarts.init(document.getElementById('chaStuPro'));
option2 = {
  title : {
    text: '当月转换学员比',
    x:'14%'
  },
  color : ['#3cf','#2f4554', '#61a0a8', '#d48265', '#91c7ae','#749f83',  '#ca8622', '#bda29a','#6e7074', '#546570', '#c4ccd3'],
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['已转化学员','未转化学员']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%==  @transf_scale.to_json %>
  }
  ]
};
myChart2.setOption(option2);
// 意向学员年龄比
var myChart3 = echarts.init(document.getElementById('stuAgePro'));
option3 = {
  title : {
    text: '意向学员年龄比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['幼儿','少年','青少年','成年']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'年龄阶段',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:<%==  @potential_student_age_scale.to_json %>
  }
  ]
};
myChart3.setOption(option3);
// 转化学员年龄比
var myChart4 = echarts.init(document.getElementById('transPro'));
option4 = {
  title : {
    text: '转化学员年龄比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['幼儿','青少年','少年','成年']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%== @transf_potential_student_age_scale.to_json%>
  }
  ]
};
myChart4.setOption(option4);
// 未转化学员年龄比
var myChart5 = echarts.init(document.getElementById('noTransPro'));
option5 = {
  title : {
    text: '未转化学员年龄比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['幼儿','青少年','少年','成年']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data: <%== @untransf_potential_student_age_scale.to_json%>
  }
  ]
};
myChart5.setOption(option5);
// 意向学员信息来源比
var myChart6 = echarts.init(document.getElementById('infoPro'));
option6 = {
  title : {
    text: '意向学员信息来源比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data: <%== Company::SOURCE_FROM.keys.to_json %>
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'信息来源',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:<%== @potential_student_source_scale.to_json %>
  }
  ]
};
myChart6.setOption(option6);
// 意向学员性别比
var myChart7 = echarts.init(document.getElementById('intenPro'));
option7 = {
  title : {
    text: '意向学员性别比',
    x:'14%'
  },
  tooltip : {
    trigger: 'item',
    formatter: "{a} <br/>{b} : {c} ({d}%)"
  },
  legend: {
    x : 'center',
    y : 'bottom',
    data:['男','女']
  },
  toolbox: {
    show : true,
    feature : {
      mark : {show: true},
      // dataView : {show: true, readOnly: false},
      magicType : {
        show: true,
        type: ['pie', 'funnel']
      },
      // restore : {show: true},
      saveAsImage : {show: true}
    }
  },
  calculable : true,
  series : [
  {
    name:'半径模式',
    type:'pie',
    radius : [20, 140],
    center : ['50%', '50%'],
    roseType : 'radius',
    lableLine: {
      normal: {
        show: false
      },
      emphasis: {
        show: true
      }
    },
    data:<%== @potential_student_sex_scale.to_json %>
  }
  ]
};
myChart7.setOption(option7);

//  切换  业绩排行  回访排行 market_result
//假数据
var testObj = {
  "yj" : [{
    dataY: <%==  @market_result.market_names %>,
    dataX: <%==  @market_result.market_values %>
  }],
  "hf" : [{
    dataY: <%==  @market_result.revisit_names %>,
    dataX: <%==  @market_result.revisit_values %>
  }]
}
$(".pda-tit em").on("click", function() {
  if ($(this).index() == 0) {
    myChart1.setOption({
      yAxis: {
        data: testObj.yj[0].dataY
      },
      series: [{
        data: testObj.yj[0].dataX
      }]
    });
  } else {
    myChart1.setOption({
      yAxis: {
        data: testObj.hf[0].dataY
      },
      series: [{
        data: testObj.hf[0].dataX
      }]
    });
  }
  if (!$(this).hasClass("pda-sel")) {
    $(this).addClass("pda-sel").siblings().removeClass("pda-sel");
  };
})
</script>
